 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>消费记录管理</title>
     <!-- 采用绝对路径导入css文件 -->
   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/style.css" />
     <!-- 采用绝对路径导入jquery文件 -->
   <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.2.js"></script>
    <script type="text/javascript">

     $(function () {
       //提示用户添加失败，删除失败，修改失败
         if(!${empty requestScope.msg}){
            alert("${requestScope.msg}");
         }
        //验证非空，并提交查询请求
         $("#submit").click(function () {
             //验证输入框是否为空
             var keyword = $("#keyword").val();
             if(keyword ==""){
                 alert("请输入关键字");
                return false;
            }else {
                 //javascript语言提供了一个location地址栏对象
                 //它有一个属性href,可以获取浏览器中地址栏地址
                 location.href="${pageContext.request.contextPath }/homeCostServlet?action=query&keyword="+keyword+"&currentPage=1?givenSize=${pageBean.pageSize}";
            }

       });

        //删除提示
         $("a.deleteClass").click(function () {
             //在事件fuction函数中有一个this对象，即当前响应事件的dom对象

             /**
              * confirm是确认提示框函数
              * 参数是提示内容
              * 两个按钮：确认和取消
              * 返回true表示点击确认
              */
             return confirm("你确定要删除【"+ $(this).parent().parent().find("td:first").text()+"】?");
         });

    });
     </script>
 </head>
 <body>
 <div id="header">
     <form action="${pageContext.request.contextPath}/homeCostServlet" method="get">
         <input type="hidden" name="action" value="query"/>
         <input type="hidden" name="currentPage" value="${pageBean.currentPage}"/>
         <span class="wel_word">家庭记账本</span>
         <div>
             欢迎您，${sessionScope.user}
             <a href="${pageContext.request.contextPath}/cost_edit.jsp?givenSize=${pageBean.pageSize}">新增消费记录</a>
             <input style="margin-left:20px" id="keyword" name="keyword" type="text" placeholder="请输入关键字" value=""/>
             <input id="submit" type="submit" value="查询"/>
         </div>
     </form>
 </div>

 <div id="main">
     <form action="${pageContext.request.contextPath}/homeCostServlet" method="get">
         <input type="hidden" name="action" value="listByPage"/>
         <input type="hidden" name="currentPage" value="${pageBean.currentPage}"/>
         <c:if test="${pageBean.list.size() > 0}">
             <table>
                 <tr>
                     <td class="costname" style="width:200px">消费名称</td>
                     <td>消费金额</td>
                     <td style="width:200px">登记日期</td>
                     <td colspan="3">操作</td>
                 </tr>
                 <c:forEach items="${pageBean.list}" var="item">

                     <tr>
                         <td>${item.name}</td>
                         <td>${item.money}</td>
                         <td>${item.date}</td>
                         <td><a href="${pageContext.request.contextPath}/homeCostServlet?action=getHomeCostById&id=${item.id}&givenSize=${pageBean.pageSize}">修改</a></td>
                         <td><a class="deleteClass" href="${pageContext.request.contextPath}/homeCostServlet?action=delete&id=${item.id}&givenSize=${pageBean.pageSize}">删除</a></td>
                         <td><a href="${pageContext.request.contextPath}/homeCostServlet?action=getDetail&id=${item.id}&givenSize=${pageBean.pageSize}">详情</a></td>
                     </tr>
                 </c:forEach>
                 <tr>
                     <td></td>
                     <td></td>
                     <td></td>
                     <td colspan="3"><a href="${pageContext.request.contextPath}/cost_edit.jsp?givenSize=${pageBean.pageSize}">新增</a></td>
                 </tr>
                 <tr>
                     <td colspan="6">共有${pageBean.totalSize}笔消费记录</td>
                 </tr>
             </table>
         </c:if>
         <c:if test="${pageBean.list.size() == 0}">
             <table>
                 <tr>
                     <td class="costname" style="width:200px">消费名称</td>
                     <td>消费金额</td>
                     <td style="width:200px">登记日期</td>
                     <td colspan="3">操作</td>
                 </tr>
                 <tr>
                     <td colspan="6">无相关记录</td>
                 </tr>
             </table>
         </c:if>
         <div style="text-align: center; margin-top: 20px;">
             <c:if test="${pageBean.totalPage > 0}">
                 第${pageBean.currentPage}/${pageBean.totalPage}页
                 总记录数:${pageBean.totalSize}条
                 每页<input id="givenSize" name="givenSize" type="number" min="1" placeholder="5" value="${pageBean.pageSize}"/>条
                 <c:if test="${pageBean.currentPage != 1}">
                     <a href="${pageContext.request.contextPath}/homeCostServlet?action=listByPage&currentPage=1&givenSize=${pageBean.pageSize}">[首页]</a>
                     <a href="${pageContext.request.contextPath}/homeCostServlet?action=listByPage&currentPage=${pageBean.currentPage - 1}&givenSize=${pageBean.pageSize}">[上一页]</a>
                 </c:if>
                 <c:if test="${pageBean.currentPage != pageBean.totalPage}">
                     <a href="${pageContext.request.contextPath}/homeCostServlet?action=listByPage&currentPage=${pageBean.currentPage + 1}&givenSize=${pageBean.pageSize}">[下一页]</a>
                     <a href="${pageContext.request.contextPath}/homeCostServlet?action=listByPage&currentPage=${pageBean.totalPage}&givenSize=${pageBean.pageSize}">[尾页]</a>
                 </c:if>
             </c:if>
             <c:if test="${pageBean.totalPage == 0}">
                 第1/1页
                 总记录数:0条
                 每页${pageBean.pageSize}条
             </c:if>
             <button type="submit">刷新</button>
         </div>
     </form>
 </div>
</body>
</html>

